import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import '../../config/Config.dart';
import '../../services/ScreenAdapter.dart';

class CategoryPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => CategoryPageState();
}

class CategoryPageState extends State with AutomaticKeepAliveClientMixin{
  //  左侧选中的item索引
  var _currentIndex = 0;
  List _leftData = [];
  List _rightData = [];

  //  缓存
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    ScreenAdapter.init(context);

    var leftWidth = ScreenAdapter.getScreenWidth() / 4;

    return Row(
      children: [
        //  左侧
        _leftData.length > 0
            ? Container(
                width: leftWidth,
                height: double.infinity,
                child: ListView.builder(
                  itemCount: _leftData.length,
                  itemBuilder: (context, index) {
                    return Column(
                      children: [
                        InkWell(
                          child: Container(
                            alignment: Alignment.center,
                            padding: EdgeInsets.only(
                              top: ScreenAdapter.height(30),
                              bottom: ScreenAdapter.height(30),
                            ),
                            color: _currentIndex == index
                                ? Color.fromRGBO(240, 246, 246, 0.9)
                                : Colors.white,
                            child: Text('${_leftData[index]['title']}',
                                style: TextStyle(fontSize: 12)),
                          ),
                          onTap: () {
                            this.setState(() {
                              _currentIndex = index;
                            });
                            //  获取右侧二级分类数据
                            var cid = _leftData[index]['_id'];
                            _getRightData(cid);
                          },
                        ),
                        Divider(height: 1),
                      ],
                    );
                  },
                ),
              )
            : Container(width: leftWidth, height: double.infinity),

        //  右侧
        _rightData.length > 0
            ? Expanded(
                flex: 1,
                child: Container(
                  height: double.infinity,
                  color: Color.fromRGBO(240, 246, 246, 0.9),
                  padding: EdgeInsets.all(10),
                  child: Container(
                    color: Colors.white,
                    child: GridView.builder(
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 3, //横轴两个子widget
                          childAspectRatio: 1 / 1.5, //宽高比为1时，子widget
                          crossAxisSpacing: ScreenAdapter.width(20),
                          mainAxisSpacing: ScreenAdapter.height(20)),
                      itemCount: _rightData.length,
                      itemBuilder: (context, index) {
                        String pic = _rightData[index]['pic'];

                        return InkWell(
                          child: Column(children: [
                            AspectRatio(
                              aspectRatio: 1 / 1,
                              child: Image.network(
                                  '${Config.domain + pic.replaceAll('\\', '/')}',
                                  fit: BoxFit.cover),
                            ),
                            Container(
                              alignment: Alignment.center,
                              height: ScreenAdapter.height(60),
                              child: Text('${_rightData[index]['title']}',
                                  style: TextStyle(fontSize: 12)),
                            )
                          ]),
                          onTap: (){
                            Navigator.pushNamed(context,'/productList',arguments:{"cid":_rightData[index]['_id']});
                          },
                        );
                      },
                    ),
                  ),
                ),
              )
            : Expanded(
                flex: 1,
                child: Container(
                    height: double.infinity,
                    color: Color.fromRGBO(240, 246, 246, 0.9))),
      ],
    );
  }

  @override
  void initState() {
    super.initState();

    //  获取左侧一级分类数据
    _getLeftData();
  }

  //  获取左侧一级分类数据
  _getLeftData() async {
    var api = '${Config.domain}api/pcate';
    var focusData = await Dio().get(api);
    var res = focusData.data["result"];
    var cId = res[0]['_id'];

    this.setState(() {
      this._leftData = res;
    });
    _getRightData(cId);
  }

  //  获取右侧二级分类数据
  _getRightData(cId) async {
    var api = '${Config.domain}api/pcate?pid=$cId';
    var focusData = await Dio().get(api);
    var res = focusData.data["result"];
    this.setState(() {
      _rightData = res;
    });
  }
}
